<template>

 <div class="message">
   <div><h1 class="title">采购申请页面</h1><small class="title2">添加采购信息：</small></div>

                    <el-button type="primary" size ="small" icon="view" class="fb" @click='onAddMessage()'>提交申请</el-button>

   <div class="hr"></div>
<el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%;margin-left: 50px ">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
    <el-table-column
      prop="operatorName"
      label="申请人"
      width="180">
    </el-table-column>


           <el-table-column
      prop="expend"
      label="支出金额"
      width="180">
    </el-table-column>

    <el-table-column
      prop="describe"
      label="描述"
      width="180"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="status"
      label="状态"
      width="110"
      :filters="[{ text: '审核中', value: '审核中' }, { text: '审核通过', value: '审核通过' },{ text: '审核不通过', value: '审核不通过' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.status === '审核中' ? 'primary' :(scope.row.status === '审核通过'?'success':'danger')"
          disable-transitions>{{scope.row.status}}</el-tag>
      </template>
    </el-table-column>
<el-table-column
                    prop="remark"
                    label="操作"
                    align='center'
                    width="300">
                          <template slot-scope='scope'>
                        <el-button 
                            type="warning" 
                            icon='edit' 
                            size="small"
                            @click='onEditMoney(scope.row)'
                               v-if="userInfo"
                         
                        >编辑</el-button>
                          <el-button type="success"
                          size="small"
                          @click='success(scope.row)'
                           v-if="userInfo"
                          >通过</el-button>
                          <el-button type="primary"
                          size="small"
                           @click='noPass(scope.row)'
                            v-if="userInfo"
                          >不通过</el-button>

                        <el-button 
                            type="danger" 
                            icon='delete' 
                            size="small"
                            @click='onDeleteMoney(scope.row,scope.$index)'
                             v-if="userInfo"
                        >删除</el-button>
                    </template>
                </el-table-column>

      
  </el-table>
                  <!-- 弹框页面 -->
        <Dialogpurchase :dialog='dialog' :form='form' @update="getPurchase"></Dialogpurchase>
  </div>

</template>

<script>
import Dialogpurchase from '../components/Dialogpurchase.vue'
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      userInfo: true,
      form: {
        type: '',
        describe: '',
        operatorName: '',
        expend: '',
      },
      dialog: {
        show: false,
        title: '',
        option: 'edit',
      },
    }
  },
  components: {
    Dialogpurchase,
  },

  created() {
    this.getPurchase(), this.getuser()
  },

  methods: {
    getuser() {
      let userinfo = this.$store.getters.user.identity
      if (userinfo == 'manager') {
        userinfo = true
      } else {
        userinfo = false
      }
      this.userInfo = userinfo
    },
    getPurchase() {
      this.$axios('/api/purchase').then((res) => {
        // this.tableData = res.data;

        this.tableData = res.data
        // console.log(res.data)
        // this.filterTableData = res.data
        // 设置分页数据
        // this.setPaginations()
      })
    },

    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date')
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    formatter(row, column) {
      // console.log(row.status)
      return row.describe
    },
    filterTag(value, row) {
      console.log(value)
      return row.status === value
    },
    filterHandler(value, row, column) {
      console.log(column)
      const property = column['property']
      return row[property] === value
    },
    onDeleteMoney(row, index) {
      // 删除
      this.$axios.delete(`/api/purchase/delete/${row._id}`).then((res) => {
        this.$message('删除成功')
        this.getPurchase()
      })
    },
    success(row) {
      this.$axios.post(`/api/purchase/success/${row._id}`).then((res) => {
        this.$message('审核通过')
        this.getPurchase()
      })
    },
    noPass(row) {
      this.$axios.post(`/api/purchase/nopass/${row._id}`).then((res) => {
        this.$message('审核失败')
        this.getPurchase()
      })
    },

    onAddMessage() {
      // 添加
      this.dialog = {
        show: true,
        title: '添加采购信息',
        option: 'add',
      }
      this.form = {
        type: '',
        describe: '',
        operatorName: '',
        expend: '',
      }
    },
    onEditMoney(row) {
      // 编辑
      this.dialog = {
        show: true,
        title: '修改资金信息',
        option: 'edit',
      }
      this.form = {
        type: row.type,
        describe: row.describe,
        expend: row.expend,
        operatorName: row.operatorName,
        id: row._id,
      }
    },
  },
}
</script>
<style scoped>
.message {
  overflow: hidden;
  float: left;
  width: 1200px;
}
.title {
  float: left;
  font-size: 40px;
  margin-left: 100px;
  margin-top: 35px;
}
.title2 {
  display: block;
  float: left;
  font-size: 18px;
  color: rgb(80, 77, 77);
  margin-top: 57px;
  margin-left: 10px;
}
.hr {
  border: 1px solid rgb(230, 227, 227);
  width: 1100px;
  float: left;
  margin-top: 10px;
  margin-left: 50px;
}
.fb {
  float: right;
  margin-right: 620px;
  margin-top: 50px;
}
</style>